<template>
  <div class="q-pa-md">
    <q-form @submit="getScoreInfo" class="flex q-gutter-md">
      <q-input
        name="studentNumber"
        v-model="studentNumber"
        color="primary"
        label="请输入查询的学生学号"
        filled
        clearable
        style="width: 300px;"
      />
      <q-input
        name="courseID"
        v-model="courseID"
        color="primary"
        label="请输入修改成绩的课程号"
        filled
        clearable
        style="width: 300px;"
      />
      <div>
        <q-btn icon="search" label="查询学生信息" type="submit" color="primary" style="width: 152px;height: 56px"/>
      </div>
    </q-form>
    <q-table
      :loading="studentScoreTable.loading"
      style="margin-top: 20px"
      :data="studentScoreTable.data"
      :columns="studentScoreTable.columns"
      :filter="studentScoreTable.filter"
      row-key="name"
      no-data-label="没有找到任何信息"
    >
      <!-- 自定义无数据插槽 -->
      <template v-slot:no-data="{ icon, message, filter }">
        <div class="full-width row flex-center text-primary q-gutter-sm">
          <q-icon size="2em" name="sentiment_dissatisfied"/>
          <span>
             {{ message }}
          </span>
          <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon"/>
        </div>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td :props="props" key="studentNumber">{{props.row.studentNumber}}</q-td>
          <q-td :props="props" key="studentRealName">{{props.row.studentRealName}}</q-td>
          <q-td :props="props" key="studentSex">{{props.row.studentSex}}</q-td>
          <q-td :props="props" key="collegeName">{{props.row.collegeName}}</q-td>
          <q-td :props="props" key="gradeId">{{props.row.gradeId}}</q-td>
          <q-td :props="props" key="majorName">{{props.row.majorName}}</q-td>
          <q-td :props="props" key="className">{{props.row.className}}</q-td>
          <q-td :props="props" key="courseId">{{props.row.courseId}}</q-td>
          <q-td :props="props" key="semesterYear">{{props.row.semesterYear}}</q-td>
          <q-td :props="props" key="semesterType">{{props.row.semesterType}}</q-td>
          <q-td :props="props" key="courseName">{{props.row.courseName}}</q-td>
          <q-td :props="props" key="courseType">{{props.row.courseType}}</q-td>
          <q-td :props="props" key="courseScore">{{props.row.courseScore}}
            <q-popup-edit v-model="props.row.courseScore" buttons label-set="更改" label-cancel="取消" @save="handleSet(props.row.studentNumber,props.row.courseId,props.row.courseScore)">
              <q-input v-model="props.row.courseScore" dense autofocus counter />
            </q-popup-edit>
          </q-td>
          <q-td :props="props" key="courseStandard">{{props.row.courseStandard}}</q-td>
          <q-td :props="props" key="courseCredit">{{props.row.courseCredit}}</q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script>
export default {
  name: 'AdminScoreChange',
  data () {
    return {
      studentNumber: '',
      courseID: '',
      studentScoreTable: {
        loading: false,
        filter: '',
        columns: [
          { name: 'studentNumber', label: '学号', align: 'left', field: 'studentNumber', sortable: true },
          { name: 'studentRealName', label: '姓名', align: 'left', field: 'studentRealName', sortable: true },
          { name: 'studentSex', label: '性别', align: 'left', field: 'studentSex', sortable: true },
          { name: 'collegeName', label: '学院', align: 'left', field: 'collegeName', sortable: true },
          { name: 'gradeId', label: '年级', align: 'left', field: 'gradeId' },
          { name: 'majorName', label: '专业', align: 'left', field: 'majorName', sortable: true },
          { name: 'className', label: '班级', align: 'left', field: 'className', sortable: true },
          { name: 'courseId', label: '课程号', align: 'left', field: 'courseId', sortable: true },
          { name: 'semesterYear', label: '学年', align: 'left', field: 'semesterYear', sortable: true },
          { name: 'semesterType', label: '学期', align: 'left', field: 'semesterType', sortable: true },
          { name: 'courseType', label: '课程类型', align: 'left', field: 'courseType', sortable: true },
          { name: 'courseName', label: '课程名称', align: 'left', field: 'courseName', sortable: true },
          { name: 'courseScore', label: '成绩', align: 'left', field: 'courseScore', sortable: true },
          { name: 'courseStandard', label: '课程标准', align: 'left', field: 'courseStandard', sortable: true },
          { name: 'courseCredit', label: '课程学分', align: 'left', field: 'courseCredit', sortable: true }
        ],
        data: []
      }
    }
  },
  methods: {
    handleSet (e1, e2, e3) {
      const query = {
        url: '/AdminScoreChangeServlet',
        method: 'get',
        params: {
          p1: e1,
          p2: e2,
          p3: e3
        }
      }
      // 调用内置 ajax 方法
      this.$fetchData(query).then((res) => {
        console.log(res)
        this.studentScoreTable.data = [res.data]
        if (res.data === '更改成功') {
          this.$q.notify({
            icon: 'announcement',
            message: res.data,
            color: 'green',
            position: 'top',
            timeout: 3000
          })
        }
        if (res.data === '更改失败') {
          this.$q.notify({
            icon: 'announcement',
            message: res.data,
            color: 'blue',
            position: 'top',
            timeout: 3000
          })
        }
      }).catch(e => {
        console.log(e)
      })
    },
    getScoreInfo () {
      const query = {
        url: '/ScoreChangeServlet',
        method: 'get',
        params: {
          p1: this.studentNumber,
          p2: this.courseID
        }
      }
      // 调用内置 ajax 方法
      this.$fetchData(query).then((res) => {
        console.log(res)
        this.studentScoreTable.data = [res.data]
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>
